<template>
  <view class="shop-lay">
    <view class="shop-item" v-for="(item ,index) in dataList" :key="index" @tap="onShop(item.id)">
      <image class="shop-item-img" :src="$wanlshop.oss(item.avatar)" mode="aspectFill"></image>
      <view class="shop-item-title single-line">{{item.shopname}}</view>
    </view>
    <uni-load-more :status="status" :content-text="contentText" />
  </view>
</template>

<script>
export default {

  data() {
    return {
      search:{
        current_page: 1, //当前页码
        type: '',
      },
      dataList:[],
      status: 'loading',
      contentText: {
        contentdown: ' ',
        contentrefresh: '加载中',
        contentnomore: ''
      },
    };
  },
  onLoad(options) {
    this.search.type = options.type
    var title = options.title
    if (title){
      uni.setNavigationBarTitle({
        title: title
      });
    }
    this.getList()
  },
  onPullDownRefresh() {
    this.search.current_page = 1;
    this.getList()
  },
  onReachBottom() {
    //判断是否最后一页
    this.status = 'loading';
    this.getList();
  },
  methods:{
    getList(){
      this.$api.get({
        url: '/wanlshop/shop/shopNav',
        data: this.search,
        success: res => {
          if (this.search.current_page === 1){
            this.dataList = res.data;
          }else {
            this.dataList = this.dataList.concat(res.data)
          }

          if (res.last_page === res.current_page) {
            this.status = 'noMore';
          } else {
            this.status = 'more';
            this.search.current_page++;
          }
        }
      });
    },
  }
}
</script>

<style lang="scss">
.shop-lay{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 30rpx;
  overflow: hidden;
}
.shop-item{
  width: 340rpx;
  background: white;
  border-radius: 15rpx;
  margin: 10rpx 0;
}
.shop-item-img{
  width: 340rpx;
  height: 200rpx;
}
.shop-item-title{
  width: 100%;
  padding: 15rpx;
  font-size: 28rpx;
  color: black;
  text-align: center;

}
.single-line {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 溢出部分显示为省略号 */
}
</style>
